<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>

</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

        const root = ReactDOM.createRoot(document.getElementById("root"));
        const {createRef} = React;
        class App extends React.Component {
            dataInit ={
                userName:"zhangsan",
                passWord:"123456",
                city:"2",
                sex:"1",
                hobby:["1","3"]
            }
           
            myForm ={
                userName:createRef(),
                passWord:createRef(),
                city:createRef(),
                sex:[createRef(),createRef()],
                hobby:[createRef(),createRef(),createRef(),createRef()]
            }
            submitHandler(e){
                e.preventDefault();
                    console.log("用户名：",this.myForm.userName.current.value);
                    console.log("密码：",this.myForm.passWord.current.value);
                    console.log("城市:",this.myForm.city.current.value);
                    console.log("性别：",this.myForm.sex.find(v=>v.current.checked).current.value);
                    console.log("爱好：",this.myForm.hobby.filter(v=>v.current.checked).current.value);
            }
            render() {
                return (
                    <form onSubmit={this.submitHandler.bind(this)}>
                        <p>用户名： <input name={"userName"} onChange={this.changeHandler.bind(this)} value={this.state.userName} type="text"/>
                            </p>
                            <p>密码: <input name={"password"} onChange={this.changeHandler.bind(this)} value={this.state.password} type="passWord"/></p>

                            <p>
                                所在城市:
                                <select name="city" ref={this.myForm.city} defaultValue={this.dataInit.city}>
                                    <option value="1">北京</option>
                                    <option value="2">上海</option>
                                    <option value="3">武汉</option>
                                    <option value="4">西安</option>
                                    <option value="5">深圳</option>
                                    <option value="6">南白滩</option>
                                </select>     
                            </p>
                            <p>
                                性别:
                                <input type="radio" ref={this.myForm.sex[0]} defaultChecked={this.dataInit.sex==="1"} name={"sex"} value={1}/>男    
                                <input type="radio" ref={this.myForm.sex[1]} defaultChecked={this.dataInit.sex==="2"} name={"sex"} value={2}/>女    
                            </p>
                            <p>
                                爱好:
                                <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[0]} defaultChecked= {this.state.hobby.includes("1")} value={1}/>学习
                                <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[1]} defaultChecked= {this.state.hobby.includes("2")} value={2}/>电影
                                <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[2]} defaultChecked= {this.state.hobby.includes("3")} value={3}/>影视
                                <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[3]} defaultChecked= {this.state.hobby.includes("4")} value={4}/>娱乐
                            </p>
                            <button>提交</button>
                    </form>
                )
            }
        }

        root.render(<App/>)
    </script>
</body>

</html>